<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="文章列表" name=1>
      <ArticleSelector :id="1" :filterCondition="filterCondition"></ArticleSelector>
      <List :MyArticle="MyArticle.articles" name=1></List>
      <Pagination :title="1" :total="MyArticle.total" :current_page="MyArticle.current_page"
                  :num_pages="MyArticle.num_pages"></Pagination>
    </el-tab-pane>
    <el-tab-pane label="我的喜欢" name=2>
      <ArticleSelector :id="2" :filterCondition="filterCondition"></ArticleSelector>
      <List :MyArticle="MyLikeArticle.articles" name=2></List>
      <Pagination :title="2" :total="MyLikeArticle.total" :current_page="MyLikeArticle.current_page"
                  :num_pages="MyLikeArticle.num_pages"></Pagination>
    </el-tab-pane>
    <el-tab-pane label="我的收藏" name=3>
      <ArticleSelector :id="3" :filterCondition="filterCondition"></ArticleSelector>
      <List :MyArticle="MyCollectsArticle.articles" name=3></List>
      <Pagination :title="3" :total="MyCollectsArticle.total" :current_page="MyCollectsArticle.current_page"
                  :num_pages="MyCollectsArticle.num_pages"></Pagination>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {mapActions, mapGetters, mapMutations} from 'vuex'
import List from "./List"

export default {
  name: "ArticleList",
  components: {
    List,
  },
  data() {
    return {
      activeName: '1',    // 此时显示的页面名字
      filterCondition: {
        state: '',  // 选择的状态
        tag: '',  // 选择的标签
        time: '',   // 查找的时间范围
        key: '', // 输入的关键字
        pag: 1,// 请求的页数
      },
    }
  },
  methods: {
    // 切换菜单栏
    handleClick() {
      this.filterCondition = {
        state: '',  // 选择的状态
        tag: '',  // 选择的标签
        time: '',   // 查找的时间范围
        key: '', // 输入的关键字
      }
      this.setSearchArticle([])
    },
    ...mapActions('ArticleList', ['getMyArticle', 'getMyLikeArticle', 'getMyCollectsArticle']),
    ...mapMutations('ArticleList', ['setSearchArticle'])
  },
  mounted() {
    setTimeout(() => {
      let obj = {
        nid: this.$store.state.userinfo.nid
      }
      this.getMyArticle(obj)
      this.getMyLikeArticle(obj)
      this.getMyCollectsArticle(obj)
    }, 50)
  },
  computed: {
    ...mapGetters('ArticleList', ['MyArticle', 'MyLikeArticle', 'MyCollectsArticle'])
  }
}
</script>

<style scoped>

</style>